div.masonry-content {
	display: inline-block;
	width: 100%;
	border: 1px solid #e6e6e6;
	transition: transform 0.3s;
	border-radius: 5px;

	span.text {
		display: block;
		max-width: 100%;
		height: auto;
		text-align: left;
		overflow: hidden;
		padding: 1em;

		span.img-span {
			float: left;
			width: 3rem;
			height: 3rem;
			border-radius: 50%;
			margin: 0 8px 1px 0;
			overflow: hidden;

			app-lazy-img /deep/ img {
				display: block;
				width: 3rem;
				height: 3rem;
			}
		}
		a.profile-link {
			color: #333333;

			span.name {
				font-weight: 600;
				font-size: 0.9rem;
				line-height: 1rem;
				padding: 8px 0 0 0;
				display: block;
				white-space: nowrap;
			}

			span.screen-name {
				font-size: 0.8rem;
				line-height: 1rem;
				font-weight: 500;
				padding: 8px 0 0 0;
			}
		}
		span.time {
			font-weight: 300;
			font-size: 0.8rem;
			line-height: 2rem;
			float: right;
		}

		span.status {
			font-weight: 400;
			font-size: 1rem;
			line-height: 1.7rem;
			padding: 8px 0 0 0;
			display: block;
			margin-top: 10px;
		}
	}
	span.gallery {
		display: block;
		width: 100%;
		height: auto;

		/deep/ img {
			width: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	span.action-box {
		display: flex;
		justify-content: space-between;
		max-width: 100%;
		padding: 1em;

		i.md-20{
			font-size: 1rem;
			color: #aab8c2;;
		}

		span.action {
			display: flex;

			a {
				text-decoration: none;
				font-size: 1rem;
				color: #aab8c2;

				span.counter {
					position: relative;
					bottom: 3px;
				}
			}
		}

		span.reply-action:hover {
			cursor: pointer;

			a {
				color: #89C9FA;
			}

			i.reply {
				color: #89C9FA;
			}
		}

		span.retweet-action:hover {
			cursor: pointer;

			a {
				color: #19cf86;
			}

			i.retweet {
				color: #19cf86;
			}
		}

		span.favourite-action:hover {
			cursor: pointer;

			a {
				color: #e81c4f;
			}

			i.like {
				color: #e81c4f;
			}
		}
	}
}

div.masonry-content:hover {
	box-shadow: 0 0 13px rgba(33,33,33,0.30);
}
